<template>
  <div class="dialog" style="height:100%;">
    <div class="search-box">
      <div class="select-box-content">
        <div class="select-box-content-name">
          <div>
            <div>鱼塘名称：<span style="color: #0580fb">{{ formData.pondName }}</span></div>
            <div>批次编号：<span style="color: #0580fb">{{ formData.mnecode }}</span></div>
          </div>
        </div>
      </div>
      <div class="select-box-content">
        <div class="select-box-content-name">时间：</div>
        <el-date-picker v-model="formData.timeList" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" :picker-options="pickerOptions"
          @change="handleChangeTime">
        </el-date-picker>
      </div>
    </div>
    <div class="nowzheachrt">
      <div style="height: 100%;" v-if="Object.getOwnPropertyNames(zhexiantulistone).length > 0">
        <zhechart :nowwidth="'100%'" :nowheight="'100%'" :cdata="zhexiantulistone" :bottom="'20'" />
      </div>
      <div v-else>暂无直鱼数据！</div>
    </div>
  </div>
</template>

<script>
import BatchMangeApi from "@/api/batch-mange";
import HealthTaskHandlingApi from "@/api/health-management/health-task-handling";
import zhechart from "@/components/Echarts/components/linechart/chart1.vue";
import * as echarts from "echarts";
let minTime = new Date();
let maxTime = new Date();
export default {
  name: '',
  components: { zhechart },
  props: {
    editObject: {
      type: [Object],
      default: () => {
        return {}
      }
    },
  },

  data () {
    return {
      formData: {
        timeList: [],
        pondName: '',
        mnecode: ''
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < minTime || time.getTime() > maxTime;
        },
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            if (minTime < start.getTime() - 3600 * 1000 * 24 * 7) {
              picker.$emit('pick', [start, end]);
            } else {
              picker.$emit('pick', [minTime, end]);
            }
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            if (minTime < start.getTime() - 3600 * 1000 * 24 * 30) {
              picker.$emit('pick', [start, end]);
            } else {
              picker.$emit('pick', [minTime, end]);
            }
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            if (minTime < start.getTime() - 3600 * 1000 * 24 * 90) {
              picker.$emit('pick', [start, end]);
            } else {
              picker.$emit('pick', [minTime, end]);
            }
          }
        }]
      },
      searchTime: '',
      rightTableData: [],
      materialList: [],
      staffList: [],
      pondList: [],
      batchList: [],
      zhexiantulistone: {},
      rules: {
        staffName: [
          { required: true, message: "请输入员工名称", trigger: ["change", "blur"] }
        ],
      },
      showDialog: this.show,
    };
  },

  watch: {
    editObject (v) {
      console.log(v)
      this.formData.pondName = v.pondName
      this.formData.mnecode = v.mnecode
      this.formData.happenTime = v.happenTime
      this.zhexiantulistone = {}
      // this.formData.timeList = [v.happenTime.split(' ')[0], `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`]
      // console.log(this.formData.timeList)
      this.diseaseRecordId = v.diseaseRecordId
      this.queryBatch(v.productionBatchId)
    },
  },
  created () {
  },
  mounted () {
  },
  methods: {
    queryBatch (productionBatchId) {
      let date = new Date();
      BatchMangeApi.queryByCondition({ productionBatchId }).then((res) => {
        this.batchList = res.data;
        this.formData.timeList = [this.batchList[0].buildDateTime.split(' ')[0], `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`]
        minTime = new Date(this.formData.timeList[0])
        maxTime = new Date(this.formData.timeList[1])
        this.getdeadCount(this.diseaseRecordId)
      });
    },
    handleChangeTime () {
      this.getdeadCount(this.diseaseRecordId)
    },
    getdeadCount (id) {
      HealthTaskHandlingApi.deadCount({
        diseaseRecordId: id,
        startDate: this.formData.timeList[0],
        endDate: this.formData.timeList[1]
      }).then(res => {
        if (res.success) {
          this.handingzhexiangone(res.data)
        }
      })
    },
    // 折线图数据处理
    handingzhexiangone (list) {
      if (list === undefined || list.length === 0) {
        return;
      }
      let xAxisdata = [];
      let xData = [];
      let seriesData = [
        {
          name: '直鱼条数',
          type: "line",
          data: [],
          drug: [],
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                { offset: 0, color: "#04FA99" },
                { offset: 1, color: "#3EACE5" }
              ])
            }
          }
        }
      ];
      list.forEach(item => {
        seriesData[0]["data"].push(item.num);
        seriesData[0]["drug"].push(item);
        let ggdate = item.date;
        xAxisdata.push(ggdate);
      });
      this.zhexiantulistone = {
        xAxisdata: xAxisdata,
        xData: xData,
        seriesData: seriesData,
        unitName: '条'
      };
    },
  }
};
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

  .select-box-content {
    width: fit-content;
  }
}

.nowzheachrt {
  width: calc(100% - 10px);
  padding: 0 18px;
  height: calc(100% - 20px);
  box-sizing: border-box;
  // background-color: chartreuse;
}
</style>
